<template>
    <div>
      <div class="container">
        <div class="handle-box">
          <el-input
            v-model="query.ip"
            class="handle-input mr10"
            placeholder="请输入ip"
          ></el-input>
          <el-input
            v-model="query.username"
            class="handle-input mr10"
            placeholder="请输入邮箱号"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
            class="margin10"
            >搜索
          </el-button>
        </div>
        <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          v-loading="loading"
          header-cell-class-name="table-header"
        >
          <el-table-column
            prop="uid"
            label="uId"
            align="center"
          ></el-table-column>
        <el-table-column
            prop="username"
            label="邮箱号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ip"
            label="ip"
            align="center"
          >
          </el-table-column>
          
          
          
          
  
          <el-table-column
            prop="create_time"
            label="操作时间"
            align="center"
          ></el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>
      </div>
     
    </div>
  </template>
  
  <script>
  import { Loading } from "element-ui";
  import AxiosPost from "../api/index";
  
  export default {
    name: "DoLogList",
    data() {
      return {
        query: {
            ip:'',
            username:'',
          pageIndex: 1,
          pageSize: 10,
        },
        tableData: [],
        pageTotal: 0,
        loading: true,
      };
    },
    created() {
      this.getData();
      this.gethbSelect();
    },
    methods: {
      handleSearch() {
        this.$set(this.query, "pageIndex", 1);
        this.getData();
      },
     
      async getData() {
        this.loading = true;
        let info = await AxiosPost("/admin/user/userloginlog", this.query);
        if (info.code !== 10000) {
          this.$message.error(info.message);
          return false;
        }
        info.data.list.forEach(item => {
                item.create_time = this.$moment(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
            })
        this.loading = false;
        this.tableData = info.data.list;
        this.pageTotal = info.data.meta.total;
      },
      // 分页导航
      handlePageChange(val) {
        this.$set(this.query, "pageIndex", val);
        this.getData();
      },
    },
  };
  //时间戳转换
  </script>
  
  <style scoped>
  .handle-input {
    width: 200px;
    display: inline-block;
  }
  
  .mr10 {
    margin-right: 10px;
  }
  
  .handle-box {
    margin-bottom: 20px;
  }
  
  .table {
    width: 100%;
    font-size: 14px;
  }
  
  .margin10 {
    margin-left: 10px;
  }
  </style>
  